<template>
  <div class="dashboard-container">
    <el-card class="top-card">
      <div class="goodmorning">
        <div class="img">
          <img src="../../assets/common/head.jpg" alt="" />
        </div>
        <div>
          <span>早安，管理员，祝你开心每一天！</span>
          <span class="myname">管理员 | 传智播客-总裁办</span>
        </div>
      </div>
    </el-card>
    <br />
    <el-row :gutter="14">
      <el-col :span="12" class="left">
        <el-card class="workcalendar">
          <workCalendar></workCalendar>
        </el-card>
        <br />
        <el-card class=""></el-card>
      </el-col>
      <el-col :span="12" class="right">
        <el-card class=""></el-card>
        <br />
        <el-card class=""></el-card>
        <br />
        <el-card class=""></el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Dashboard",
  data() {
    return {
      value: new Date(),
      year: "", // 当前年
      month: "", // 当前月
    };
  },
  computed: {
    ...mapGetters(["name"]),
  },
  components: {
    workCalendar: () => import("./components/work-calendar.vue"),
  },
};
</script>

<style lang="scss" scoped>
.dashboard-container {
  padding: 20px;
  background-color: #eef0f3;
  // 早安
  .goodmorning {
    display: flex;
    justify-content: left;
    align-items: center;
    font-size: 22px;
    .img {
      width: 110px;
      height: 110px;
      margin-right: 10px;
    }
    .myname {
      display: block;
      color: #7f8cab;
      margin-top: 10px;
    }
  }
  // 工作日历
  .left {
.workcalendar{
}
  }
}
</style>
